<template>
    <div class="view2Verify">
        <!-- 头部 -->
        <!-- <div class="header">
            <x-icon type="ios-arrow-left" size="" class="icon-white" @click="$router.go(-1)"></x-icon>安全检查
        </div> -->
        <!-- 内容部分 -->
        <div class="verifyBox2">
            <ul class="ul1">
                <li class="clearfix">
                    <span class="spa">隐患编号</span>
                    <em>{{listArr.No}} </em>
                </li>
                <li class="clearfix">
                    <span class="spa">隐患类别</span>
                    <em>{{listArr.Category}} </em>
                </li>
                <li class="clearfix">
                    <h3>隐患描述</h3>
                    <p>{{listArr.Description}} </p>
                </li>
                <li class="clearfix">
                    <h3>整改前图片</h3>
                    <div style="margin-top: 10px;" class="div_p" v-if="listArr.ProblemImgs">
                        <img class="previewer-demo-img" v-for="(item, index) in listArr.ProblemImgs" :key="index" :src="item" width="100" @click="show1(index)">
                        <div v-transfer-dom>
                            <previewer :list="listArr.ProblemImgs" ref="previewer1" :options="options" @on-index-change="logIndexChange"></previewer>
                        </div>
                    </div>
                </li>
                <li class="clearfix">
                    <h3>整改措施</h3>
                    <p>{{listArr.Measure}} </p>
                </li>
                <li class="clearfix">
                    <span class="spa">隐患级别</span>
                    <em>{{listArr.HdLevel}} </em>
                </li>
                <li class="clearfix">
                    <span class="spa">整改开始时间</span>
                    <em>{{listArr.ResolveStartTime.split(' ')[0]}} </em>
                </li>
                <li class="clearfix">
                    <span class="spa">整改结束时间</span>
                    <em>{{listArr.ResolveEndTime}} </em>
                </li>
                <li class="clearfix">
                    <span class="spa">被检查单位</span>
                    <em>{{listArr.DeptName}} </em>
                </li>
                <li class="clearfix">
                    <span class="spa">被检单位负责人</span>
                    <em>{{listArr.ProjectDutyPerson}} </em>
                </li>
                <li class="clearfix">
                    <span class="spa">隐患部位</span>
                    <em>{{listArr.ResolveArea}} </em>
                </li>
                <li class="clearfix">
                    <span class="spa">整改负责人</span>
                    <em>{{listArr.ResolveAreaDutyPerson}} </em>
                </li>
                <li class="clearfix">
                    <span class="spa">整改单位</span>
                    <em>{{listArr.ResolveDeptName}} </em>
                </li>
                <li class="clearfix">
                    <span class="spa">整改执行人</span>
                    <em>{{listArr.ResolveDutyPersonName}} </em>
                </li>
                <li class="clearfix">
                    <span class="spa">整改班组</span>
                    <em>{{listArr.ResolveGroup}} </em>
                </li>
                <li class="clearfix">
                    <span class="spa">整改班组责任人</span>
                    <em>{{listArr.ResolveGroupDutyPerson}} </em>
                </li>
            </ul>
            <h4><span class="spaTitle">检查人信息</span></h4>
            <ul class="ul1">
                <li class="clearfix">
                    <span class="spa">检查单位</span>
                    <em>{{listArr.CheckDeptName}}</em>
                </li>
                <li class="clearfix">
                    <span class="spa">检查人</span>
                    <em>{{listArr.CheckPerson}}</em>
                </li>
                <li class="clearfix">
                    <span class="spa">电话</span>
                    <em>{{listArr.Tel}}</em>
                </li>
                <li class="clearfix">
                    <span class="spa">检查时间</span>
                    <em>{{listArr.CheckTime}}</em>
                </li>
            </ul>
            <div class="arrList" v-for="(data,index) in resolvesArr" :key="index">
                <h4><span>整改信息</span><span style="float:right">(第{{index+1}}次整改)</span></h4>
                <ul class="ul1" >
                    <li class="clearfix">
                        <h3>整改情况回复</h3>
                        <p>{{data.Description}}</p>
                    </li>
                    <li class="clearfix">
                        <span class="spa">实际完成时间</span>
                        <em>{{data.ResolveTime}}</em>
                    </li>
                    <li class="clearfix">
                        <h3>整改前图片</h3>
                        <div style="margin-top: 10px;" class="div_p">
                            <img class="previewer-demo-img" v-for="(img, index) in data.imgList" :key="index" :src="img.src" width="100" @click="show2(index)">
                            <div v-transfer-dom>
                                <Previewer :list="data.imgList" ref="previewer2" :options="options" @on-index-change="logIndexChange"></Previewer>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="ul1">
                    <h4 class="h4 clearfix"><span>验收信息</span><span style="float:right">(第{{index+1}}次验收)</span></h4>
                    <div class="li clearfix" >
                        <span class="spa">验收负责人</span>
                        <em>{{data.Check.CheckDutyPerson}}</em>
                    </div>
                    <div class="li clearfix">
                        <span class="spa">验收日期</span>
                        <em>{{data.Check.CheckTime.split(' ')[0]}}</em>
                    </div>
                    <div class="li clearfix">
                        <span class="spa">验收结果</span>
                        <em>{{data.Check.IsApproved}}</em>
                    </div>
                    <div class="li clearfix">
                        <h3>验收情况回复</h3>
                        <p>{{data.Check.Description}}</p>
                    </div>
                    <div class="li clearfix">
                        <h3>验收前图片</h3>
                        <div style="margin-top: 10px;" class="div_p">
                            <img class="previewer-demo-img" v-for="(item2, index) in data.Check.checkImg" :key="index" :src="item2.src" width="100" @click="show3(index)">
                            <div v-transfer-dom>
                                <previewer :list="data.Check.checkImg" ref="previewer3" :options="options" @on-index-change="logIndexChange"></previewer>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ul1">
                    <h4 class="h4 clearfix"><span>隐患审核</span><span style="float:right">(第{{index+1}}次审核)</span></h4>
                    <div class="li clearfix">
                        <span class="spa">隐患日期</span>
                        <em v-if="data.Verify">{{data.Verify.CheckTime.split(' ')[0]}}</em>
                    </div>
                    <div class="li clearfix">
                        <span class="spa">隐患结果</span>
                        <em v-if="data.Verify">{{data.Verify.IsApproved}}</em>
                    </div>
                    <div class="li clearfix">
                        <h3>审核情况回复</h3>
                        <p v-if="data.Verify">{{data.Verify.Description}}</p>
                    </div>
                </div>
                 <div class="ul1">
                    <h4 class="h4 clearfix"><span>隐患复查</span><span style="float:right">(第{{index+1}}次复查)</span></h4>
                    <div class="li clearfix">
                        <span class="spa">验证日期</span>
                        <em v-if="data.DepartReview">{{data.DepartReview.CheckTime}}</em>
                    </div>
                    <div class="li clearfix">
                        <span class="spa">验证结果</span>
                        <em v-if="data.DepartReview">{{data.DepartReview.IsApproved}}</em>
                    </div>
                    <div class="li clearfix">
                        <h3>验证方式</h3>
                        <p v-if="data.DepartReview">
                            <group>
                                <radio :selected-label-style="{color: '#FF9900'}" :options="radio001" @on-change="change" value="现场" disabled v-if="data.DepartReview.Spot"></radio>
                                <radio :selected-label-style="{color: '#FF9900'}" :options="radio001" @on-change="change" value="资料" disabled v-else-if="data.DepartReview.Material"></radio>
                                <radio :selected-label-style="{color: '#FF9900'}" :options="radio001" @on-change="change" value="" disabled v-else></radio>
                            </group>
                        </p>
                    </div>
                    <div class="li clearfix">
                        <h3>验证结论意见</h3>
                        <p v-if="data.DepartReview">{{data.DepartReview.Description}}</p>
                    </div>
                </div>
                <div class="ul1">
                    <h4 class="h4 clearfix"><span>复查验证</span><span style="float:right">(第{{index+1}}次验证)</span></h4>
                    <div class="li clearfix">
                        <span class="spa">验证日期</span>
                        <em v-if="data.Confirm">{{data.Confirm.CheckTime}}</em>
                    </div>
                    <div class="li clearfix">
                        <span class="spa">验证结果</span>
                        <em v-if="data.Confirm">{{data.Confirm.IsApproved}}</em>
                    </div>
                    <div class="li clearfix">
                        <h3>验证方式</h3>
                        <p v-if="data.Confirm">
                            <group>
                                <radio :selected-label-style="{color: '#FF9900'}" :options="radio001" @on-change="change" value="现场" disabled v-if="data.Confirm.Spot"></radio>
                                <radio :selected-label-style="{color: '#FF9900'}" :options="radio001" @on-change="change" value="资料" disabled v-else-if="data.Confirm.Material"></radio>
                                <radio :selected-label-style="{color: '#FF9900'}" :options="radio001" @on-change="change" value="" disabled v-else></radio>
                            </group>
                        </p>
                    </div>
                    <div class="li clearfix">
                        <h3>验证结论意见</h3>
                        <p v-if="data.Confirm">{{data.Confirm.Description}}</p>
                    </div>
                </div>
            </div>
        </div>
        <myMenu @clickBack="back" ></myMenu>
    </div>
</template>
<script>
import { Previewer, TransferDom, Radio, Group, CheckIcon} from 'vux'
import myMenu from '@/commonComponents/menu'
export default {
  directives: {
    TransferDom
  },
  components: {
    Previewer,
    Radio,
    Group,
    CheckIcon,
    myMenu
  },
  data () {
      return {
        radio001: [ '现场', '资料' ],
        show: false,
        demo1: true,
        list: [{
                msrc: '../../../static/images/index/banner.png',
                src: '../../../static/images/index/banner.png'
            },
            {
                msrc: '../../../static/images/index/icon1.png',
                src: '../../../static/images/index/icon1.png'
            }
        ],
        options: {
            getThumbBoundsFn (index) {
                let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
                let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                let rect = thumbnail.getBoundingClientRect()
                return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
            }
         },
        param2: {
            allowPaging: false,
            business: 'FetchHiddenDanger',
            data: 'd2398df5-9527-4455-90dd-aa32011bbaca',
            pageIndex: 0,
            pageSize: 20,
            tokenId: 'D0853C0CE5A6A478F5C613B840394FC3',
            userId: '615123137'
        },
        listArr: [],
        resolvesArr: [],
        CheckArr: {},
        Verify: {},
        DepartReview: {},
        Confirm: {}
      }
  },
  created () {
    var token = JSON.parse(window.localStorage.getItem('userInfo'))
    this.param2.userId = token.userid
    this.param2.data = this.$route.query.id
  },
  mounted () {
    this.dataArr()
  },
  methods: {
      back () {

      },
    change (value, label) {
      console.log('change:', value, label)
    },
    logIndexChange (arg) {
      console.log(arg)
    },
    // show (index) {
    //     console.log(this.$children)
    //   this.$children[0].init(index);
    // },
    show2 (index) {
        console.log(this.$children)
      this.$children[0].init(index)
    },
    show3 (index) {
        console.log(this.$children)
      this.$children[0].init(index)
    },
    // 页面数据
    dataArr () {
        this.$axiosAjax.getConfigJson(this.param2).then((res) => {
            if (res.status) {
                this.listArr = res.data.data
                var resolves = res.data.data.Resolves
                var array = []
                var array2 = []
                for (var k in resolves) {
                    for (var j of resolves[k].ResolveImgs) {
                        var obj = {}
                        obj.msrc = j
                        obj.src = j
                        array.push(obj)
                    }
                    resolves[k].imgList = array
                    for (var i of resolves[k].Check.CheckImgs) {
                        var obj = {}
                        obj.msrc = i
                        obj.src = i
                        array2.push(obj)
                    }
                    resolves[k].Check.checkImg = array
                }
                console.log(resolves, 123)
                this.resolvesArr = resolves
            }
        })
    }
  }
}
</script>
<style lang="less">
.view2Verify{
    width: 100%;
    height: 100%;
    .header{
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        position: relative;
        font-size: 18px;
        background: #2269ff;
        color: #fff;
        .vux-x-icon{
            fill:cornsilk;
            position: absolute;
            left: 0;
            top: 5px;
            width: 30px;
            height: 30px;
        }
    }
    .verifyBox2{
        height: 603px;
        width: 100%;
        background-color: #ebeef2;
        padding-top: 10px;
        .ul1{
            width: 100%;
            padding: 0 10px;
            background-color: #fff;
            margin-bottom: 20px;
            li,.li{
                padding: 10px 0;
                border-bottom:1px solid #eee;
                width: 100%;
                // height: 50px;
                line-height: 30px;
                position: relative;
                .vux-x-icon{
                    fill: #999;
                    float: right;
                    position: absolute;
                    top: 12px;
                    right: -4px;
                }
                .spa{
                    float: left;
                    width: 114px;
                    font-size: 14px;
                    color: #333;
                }
                .spaTitle{
                    float: left;
                    font-size: 16px;
                    width: 196px;
                    color: #2269ff;
                }
                em{
                    float: right;
                    width: 230px;
                    height: 30px;
                    line-height: 30px;
                    text-align: right;
                    margin-right: 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 14px;
                    color: #999;
                }
                h3{
                    font-size: 14px;
                    letter-spacing: 2px;
                    height: 30px;
                    line-height: 30px;
                    color: #333;
                }
                p,.div_p{
                    font-size: 14px;
                    color: #999;
                    .previewer-demo-img{
                        width: 50px;
                        height: 50px;
                        border-radius: 5px;
                        margin-right: 20px;
                    }
                    .weui-cell{
                        width: 100px;
                        float: left;
                        margin-left: 60px;
                        .vux-radio-label{
                            color: #999;
                        }
                    }
                }
                .vux-cell-value{
                    float: right;
                    margin-right: 20px;
                }

            }
            .h4{
                    background-color: #ebeef2;
                    margin-bottom: 10px;
                    height: 49px;
                    float: left;
                    margin-left: -10px;
                    span{
                        color: #2269ff;
                        font-size: 16px;
                        height: 50px;
                        line-height: 50px;
                        margin:0 10px;
                    }
                }
        }
        .ul2{
            width: 100%;
            padding: 0 10px;
            background-color: #fff;
            margin-bottom: 10px;
            li{
                border-bottom:1px solid #999;
                width: 100%;
                line-height: 30px;
                position: relative;
                .spaTitle{
                    font-size: 16px;
                    color: #2269ff;
                    height: 40px;
                    line-height: 40px;
                }
                h3{
                    font-size: 14px;
                    letter-spacing: 2px;
                    height: 30px;
                    line-height: 30px;
                    color: #333;
                }
                p{
                    height: 30px;
                    line-height: 30px;
                    font-size: 16px;
                    color: #999;
                }
            }
        }
        .ul3{
            background-color: #ebeef2;
            padding: 10px 0 20px;
            h3,h4{
                margin-top: 10px;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                color: #2269ff;
                padding: 0 10px;
                border-bottom: 1px solid #999;
                background-color: #fff;
                color: #333;
                span{
                    font-size: 16px;
                    height: 40px;
                    line-height: 40px;
                    color: #999;
                }
                em{
                    float: right;
                    height: 40px;
                    line-height: 40px;
                    position: relative;
                    font-size: 16px;
                    color: #ffb400;
                }
            }
            h4{
                font-size: 16px;
                color: #333;
                em{
                    position: relative;
                    color: #ffb400;
                    .vux-x-icon{
                        fill:#999;
                        float: right;
                        width: 20px;
                        height: 20px;
                        margin-top: 10px;
                    }
                }

            }
        }
        h4{
            background-color: #ebeef2;
            width: 375px;
            height: 49px;
            span{
                color: #2269ff;
                font-size: 16px;
                height: 50px;
                line-height: 50px;
                margin:0 10px;
            }
        }
        .arrList{
            background-color: #fff;
        }
    }
}
</style>
